<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Mbus Inspector</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"></link>


</head>
<body onload="disconnect()">
 
<div class="container-fluid">

    <div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
 
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h1>Mbus Inspector</h1>
      <p>使用热表的主地址进行测试,即表壳Serial No的第四位和第五位.</p>
      <p>
        <button id="connect" onclick="connect();" class="btn btn-danger">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();"  class="btn btn-default">Disconnect</button>
        
      </p>
    </div>
  </div>
   
    <div id="conversationDiv">
        <label class="control-label">起始地址</label><input type="text" id="start" />
         &nbsp;&nbsp;&nbsp;
        <label class="control-label">结束地址</label><input type="text" id="end" />

        <button id="sendName" onclick="sendName();" style="float:right" class="btn btn-success">发送</button>

        
    </div>
   
   <div class="row">
          <div class="col-xs-4"><h3>主地址：<span id="addr"></span></h3></div>
          <div class="col-xs-4"><h3>状态码：<span id="status"></span></h3></div>
          <div class="col-xs-4"><h3>告警内容：<span id="statusInfo"></span></h3></div>
 
</div>
     
        <div id="response" style="height: 500px;width: 80%"></div>

</div>
 
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 
<script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
       // document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }
	
    function connect() {
        var socket = new SockJS('/endpointWisely'); //链接SockJS 的endpoint 名称为"/endpointWisely"
        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端
        stompClient.connect({}, function(frame) {//链接Web Socket的服务端。
            setConnected(true);
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/getResponse', function(respnose){ //订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。
                var $msg=JSON.parse(respnose.body);
                $('#addr').html($msg.addr);
                $('#status').html('0x'+$msg.status.toString(16));
                $('#statusInfo').html($msg.statusInfo);
                soundRead($msg.statusInfo);
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }
	
	
    function disconnect() {

        stompClient.send("/disconnect", {}, JSON.stringify({ 'name': name,'start':$('#start').val(),'end':$('#end').val() }));

        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
         
 
        console.log("Disconnected");
    }

    function sendName() {
        var name = $('#name').val();
   		//通过stompClient.send 向/welcome 目标 发送消息,这个是在控制器的@messageMapping 中定义的。
        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name,'start':$('#start').val(),'end':$('#end').val() }));
    }

    function showResponse(message) {
         
          $("#response").html(message);
         
    }
    
    function soundRead(message){
    	if(message==''||message==null)
    		return;
    	var msg = new SpeechSynthesisUtterance(message);
    	msg.lang = 'zh';
    	msg.voice = speechSynthesis.getVoices().filter(function(voice) {
    	return voice.name == 'Whisper';
    	})[0];
    	speechSynthesis.speak(msg);
 
    }
</script>
</body>
</html>